<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02渲染和挂载</title>
</head>
<body>
<div id="app">
    计算器：{{counter}}
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //方法1：声明一个选项对象，vue3.x支持此写法
    const App01={
        //初始数据
        data(){
            return {
                counter: 100
            }
        }
    }

    //方法2：声明一个选项对象，vue3.x支持此写法
    const App02={
        //初始数据
        data(){
            return {
                counter: 200
            }
        }
    }

    //方法3：声明一个选项对象，vue3.x不支持此写法
    //不使用return包裹的数据会在项目中全局可见，会造成数据污染
    //使用return包裹后数据只在当前组件中生效，不会影响其他组件
    const App03={
        data: {
            counter: 300
        }
    }

    //全局API对象，创建应用对象返回(选项对象).挂载方法(DOM节点)
    const vm = Vue.createApp(App02).mount("#app");
</script>
</body>
</html>